<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<title>Adding a Label</title>

	<script type="text/javascript">
        function validatename(cname) {
        
        var elem = cname.id;
        
        var name = document.getElementById(elem).value;
         
        var len = name.length;
         
        if(len &lt; 4 ) {
            document.getElementById("mesg").textContent = "Car Name:Valid input";
        }
        
        else {
            document.getElementById("mesg").textContent ="Car Name:Invalid input"
        }
    }
    </script>
</h:head>
<h:body>
	<h3>Adding a label</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="cname">Car Name:</h:outputLabel>
			<h:inputText id="cname" value="#{car.cname}"
				onblur="validatename(this)"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="color">Car Color:</h:outputLabel>
			<h:inputText id="color" value="#{car.color}" immediate="true"
				size="20" required="true" requiredMessage="Color is mandatory"
				style="color: aqua"></h:inputText>
		</h:panelGrid>
		<br />
		<br />
		<div id="mesg"></div>
		<h:commandButton value="Submit"></h:commandButton>
	</h:form>

</h:body>
</html>